*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu{
    width: 100%;
    height: 40px;
    display: flex;
}
.menu .item{
    flex: 1;
    background-color: black;
    color: aliceblue;
    text-align: center;
    line-height: 40px;
}
.menu  .active{
    background-color: red;
}
.success{
    color:green;
}
.error{
    color:red;
}
.table{
    width: 800px;
    margin: 10px  auto;
}
.table .tr{
    display: flex;
}
.table  .tr  .item{
    flex: 1;
    text-align: center;
    line-height: 40px;
    background-color: black;
    color: aliceblue;
}
.table .tr .item  input{
    width: 40%;
}

.page{
    width: 600px;
    overflow: hidden;
}
.page .prev,.page .next,.page .content,.page .item{
    float: left;
    margin-left: 5px;
}
.page  .prev,.page .next {
    width: 60px;
    background-color: blue;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.page  .item{
    width: 30px;
    line-height: 30px;
    background-color: black;
    color: aliceblue;
    text-align: center;
}
.page  .active{
    background-color: red;
}
.page  .disabled{
    background-color: #cdcdcd;
}

.date{
    display: inline-block;
    position: relative;
    height: 30px;
    width: 280px;
}
.date-box{
    position:absolute;
    left: 0;
    top:30px;
    width: 280px;
    z-index: 99999;
}
.date-header{
    display: flex;
    background-color: black;
    color: azure;
    text-align: center;
}
.date-header .date-prev,.date-next{
    flex:1;

}
.date-middle{
    flex: 3;
}
.date-item{
    width: 40px;
    height: 40px;
    float: left;
    background-color: black;
    color: azure;
    text-align: center;
}
.disabled{
    background-color: #cdcdcd;
}
